import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Caricamento in corso...

In questo esempio:

• React.lazy è usato per caricare in modo lazy MyComponent.
• Suspense avvolge LazyComponent.
• La prop fallback fornisce un'interfaccia utente di riserva (un indicatore di caricamento) che viene visualizzata mentre MyComponent è in fase di caricamento.

Implementare gli Error Boundaries

Mentre Suspense gestisce gli stati di caricamento, gli Error Boundaries sono componenti React che intercettano gli errori JavaScript in qualsiasi punto del loro albero di componenti figli, registrano tali errori e visualizzano un'interfaccia utente di fallback invece di far crashare l'intero albero dei componenti.

Come Funzionano gli Error Boundaries

Gli Error Boundaries sono class components che definiscono i seguenti metodi del ciclo di vita:

• static getDerivedStateFromError(error): Questo metodo viene invocato dopo che un errore è stato lanciato da un componente discendente. Riceve l'errore lanciato come argomento e dovrebbe restituire un valore per aggiornare lo stato.
• componentDidCatch(error, info): Questo metodo viene invocato dopo che un errore è stato lanciato da un componente discendente. Riceve l'errore e un oggetto info contenente informazioni su quale componente ha lanciato l'errore. Questo è il posto ideale per registrare l'errore su un servizio come Sentry o Bugsnag.

Importante: Gli Error Boundaries intercettano solo gli errori nei componenti al di sotto di essi nell'albero. Un Error Boundary non può intercettare un errore al proprio interno.

Esempio: Implementazione Base di un Error Boundary

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Aggiorna lo stato in modo che il prossimo render mostri l'interfaccia di fallback.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // Puoi anche registrare l'errore su un servizio di reporting degli errori
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Puoi renderizzare qualsiasi interfaccia di fallback personalizzata
 return 
Qualcosa è andato storto.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Per usare l'Error Boundary, avvolgi qualsiasi componente che potrebbe lanciare un errore:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Integrare Suspense ed Error Boundaries

La vera potenza deriva dalla combinazione di Suspense ed Error Boundaries. Questo ti permette di gestire con eleganza sia gli stati di caricamento che gli errori all'interno della tua applicazione. La pratica raccomandata è avvolgere Suspense con un Error Boundary. In questo modo, se il componente caricato in modo lazy non riesce a caricarsi (es. errore di rete), l'Error Boundary può intercettare l'errore e mostrare un messaggio utile all'utente.

Esempio: Combinare Suspense ed Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Caricamento in corso...